import json
from model import Computer
from pyecharts.charts import Line, Gauge
import pyecharts.options as opts


class View():
    '''视图类，调用模型类的数据创建图表'''

    def cpu_line(self) -> Line:
        '''CPU占用率的折线图'''

        # 从Model中获取CPU占用率的数据
        cpu_percents = Computer.cpu()

        # 创建Line_area_style图表
        c = (
            Line(
                init_opts=opts.InitOpts(
                    page_title='Flask Web开发',
                    width='800px',
                    height='500px',
                    # 使用本地echart的js文件
                    js_host='/static/js/'
                )
            )
            # 配置x、y轴的数据项
            .add_xaxis(list(cpu_percents.keys()))
            .add_yaxis("CPU", list(cpu_percents.values()), is_smooth=True)
            # 配置图表显示效果
            .set_series_opts(
                areastyle_opts=opts.AreaStyleOpts(opacity=0.5),
                label_opts=opts.LabelOpts(is_show=True),
            )
            .set_global_opts(
                title_opts=opts.TitleOpts(title='CPU占用率'),
                xaxis_opts=opts.AxisOpts(
                    axistick_opts=opts.AxisTickOpts(is_align_with_label=True),
                    is_scale=False,
                    boundary_gap=False,
                )
            )
        )

        return c

    def cpu_line_api(self) -> json:
        '''配合前后端分离设计，将配置参数值转成json格式，
        以便在前端HTML页面中通过JS调用配置'''

        # cpu占用率API，返回JSON数据
        c = self.cpu_line()

        # dump_options_with_quotes()获取全局options，JSON格式
        return c.dump_options_with_quotes()

    def memory_gauge(self) -> tuple:
        '''内存使用情况的仪表盘图'''
        
        # 获取数据，这里实际只使用了一个占用率数据项
        time_stamp, total, used, available, percent = Computer.memory()
        # 明细数据，装入一个字典
        val = {
            'stamp':time_stamp,
            'total':total,
            'used':used,
            'available':available
        }

        c = (
            Gauge(
                init_opts=opts.InitOpts(
                    width='500px',
                    height='500px',
                    page_title='Flask Web开发',
                    js_host='/static/js/'
                )
            )
            .add("", [("使用率", percent)],
                 radius="50%",
                 detail_label_opts=opts.LabelOpts(
                     formatter="{value}%", font_size=24)
                 )
            .set_global_opts(title_opts=opts.TitleOpts(title="内存占用率"))
        )

        return c, val

    def memory_gauge_api(self) -> tuple:
        # 内存占用率仪表盘图表
        c, val = self.memory_gauge()
        return c.dump_options_with_quotes(), val
